<!DOCTYPE html><html lang="en" class="text-gray-500 antialiased bg-white"><head><script async="" src="https://www.googletagmanager.com/gtag/js?id=G-YK9KKZB935"></script><script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'G-YK9KKZB935', {
              page_path: window.location.pathname,
            });
          </script><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/><link rel="manifest" href="/manifest.json"/><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00b4b6"/><meta name="theme-color" content="#ffffff"/><meta name="description" content="Tailwind CSS 是一个功能类优先的 CSS 框架，它由 Adam Wathan 创建。本站提供 Tailwind CSS 官方文档中文翻译致力于为广大国内开发者提供准确的中文文档，助力开发者掌握并使用这一框架。"/><meta name="keywords" content="Tailwind CSS, CSS 框架, CSS framework, Tailwind CSS 中国, Tailwind CSS 中文文档, Tailwind CSS 代码,Tailwind CSS 入门"/><meta name="author" content="TailwindCSS中文网"/><meta name="google-site-verification" content="K6lmDHP95YNtBrmzbE8A5HivIoXC9kPq47XvdBM3jVY"/><meta name="viewport" content="width=device-width"/><meta charSet="utf-8"/><meta name="twitter:site" content="@tailwindcss"/><meta name="twitter:description" content="为您的项目定制默认调色盘。"/><meta name="twitter:creator" content="@tailwindcss"/><meta property="og:url" content="https://tailwindcss.com/docs/customizing-colors"/><meta property="og:type" content="article"/><meta property="og:description" content="为您的项目定制默认调色盘。"/><meta property="og:image" content="https://tailwindcss.com/_next/static/media/twitter-large-card.85c0ff9e455da585949ff0aa50981857.jpg"/><link rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="true"/><title>自定义颜色 - Tailwind CSS</title><meta name="twitter:title" content="自定义颜色 - Tailwind CSS"/><meta property="og:title" content="自定义颜色 - Tailwind CSS"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://tailwindcss.com/_next/static/media/twitter-square.daf77586b35e90319725e742f6e069f9.jpg"/><link rel="preload" href="/_next/static/css/91ad8a1bc71db66a58e6.css" as="style" crossorigin="anonymous"/><link rel="stylesheet" href="/_next/static/css/91ad8a1bc71db66a58e6.css" crossorigin="anonymous" data-n-g=""/><noscript data-n-css="true"></noscript><link rel="preload" href="/_next/static/chunks/main-53486d82b2545edae223.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/webpack-07c5bcab23dc3e52a7c0.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/framework.dc32737cd22c934f019a.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/commons.22d76c353a4f72632887.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/71247caf95475e3ea7f9a0f8a30beb258b23d005.1d9cdb0d7e423ae8ff11.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/pages/_app-22af6c3e18ff3a768b97.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/cecf69130dad263f9cb4ff787dd0f2dc73bfee9f.a38ff4d7f346d15b14bc.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/9f4ef91407e4b5afa7b6fb6ed79ed59ba0198a03.cff4864bd60c6088de2d.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/ce33ec08090f482ab0615cf50693463f3d0dfff9.f4323d55efa10804a132.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/pages/docs/customizing-colors-fd8b201bd46d82f7595b.module.js" as="script" crossorigin="anonymous"/></head><body><div id="__next"><div class="sticky top-0 z-40 lg:z-50 w-full max-w-8xl mx-auto bg-white flex-none flex"><div class="flex-none pl-4 sm:pl-6 xl:pl-8 flex items-center border-b border-gray-200 lg:border-b-0 lg:w-60 xl:w-72"><a class="overflow-hidden w-10 md:w-auto" href="/"><span class="sr-only">Tailwind CSS home page</span><svg viewBox="0 0 247 31" class="w-auto h-6"><path fill-rule="evenodd" clip-rule="evenodd" d="M25.517 0C18.712 0 14.46 3.382 12.758 10.146c2.552-3.382 5.529-4.65 8.931-3.805 1.941.482 3.329 1.882 4.864 3.432 2.502 2.524 5.398 5.445 11.722 5.445 6.804 0 11.057-3.382 12.758-10.145-2.551 3.382-5.528 4.65-8.93 3.804-1.942-.482-3.33-1.882-4.865-3.431C34.736 2.92 31.841 0 25.517 0zM12.758 15.218C5.954 15.218 1.701 18.6 0 25.364c2.552-3.382 5.529-4.65 8.93-3.805 1.942.482 3.33 1.882 4.865 3.432 2.502 2.524 5.397 5.445 11.722 5.445 6.804 0 11.057-3.381 12.758-10.145-2.552 3.382-5.529 4.65-8.931 3.805-1.941-.483-3.329-1.883-4.864-3.432-2.502-2.524-5.398-5.446-11.722-5.446z" fill="#06B6D4"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M76.546 12.825h-4.453v8.567c0 2.285 1.508 2.249 4.453 2.106v3.463c-5.962.714-8.332-.928-8.332-5.569v-8.567H64.91V9.112h3.304V4.318l3.879-1.143v5.937h4.453v3.713zM93.52 9.112h3.878v17.849h-3.878v-2.57c-1.365 1.891-3.484 3.034-6.285 3.034-4.884 0-8.942-4.105-8.942-9.389 0-5.318 4.058-9.388 8.942-9.388 2.801 0 4.92 1.142 6.285 2.999V9.112zm-5.674 14.636c3.232 0 5.674-2.392 5.674-5.712s-2.442-5.711-5.674-5.711-5.674 2.392-5.674 5.711c0 3.32 2.442 5.712 5.674 5.712zm16.016-17.313c-1.364 0-2.477-1.142-2.477-2.463a2.475 2.475 0 012.477-2.463 2.475 2.475 0 012.478 2.463c0 1.32-1.113 2.463-2.478 2.463zm-1.939 20.526V9.112h3.879v17.849h-3.879zm8.368 0V.9h3.878v26.06h-3.878zm29.053-17.849h4.094l-5.638 17.849h-3.807l-3.735-12.03-3.771 12.03h-3.806l-5.639-17.849h4.094l3.484 12.315 3.771-12.315h3.699l3.734 12.315 3.52-12.315zm8.906-2.677c-1.365 0-2.478-1.142-2.478-2.463a2.475 2.475 0 012.478-2.463 2.475 2.475 0 012.478 2.463c0 1.32-1.113 2.463-2.478 2.463zm-1.939 20.526V9.112h3.878v17.849h-3.878zm17.812-18.313c4.022 0 6.895 2.713 6.895 7.354V26.96h-3.878V16.394c0-2.713-1.58-4.14-4.022-4.14-2.55 0-4.561 1.499-4.561 5.14v9.567h-3.879V9.112h3.879v2.285c1.185-1.856 3.124-2.749 5.566-2.749zm25.282-6.675h3.879V26.96h-3.879v-2.57c-1.364 1.892-3.483 3.034-6.284 3.034-4.884 0-8.942-4.105-8.942-9.389 0-5.318 4.058-9.388 8.942-9.388 2.801 0 4.92 1.142 6.284 2.999V1.973zm-5.674 21.775c3.232 0 5.674-2.392 5.674-5.712s-2.442-5.711-5.674-5.711-5.674 2.392-5.674 5.711c0 3.32 2.442 5.712 5.674 5.712zm22.553 3.677c-5.423 0-9.481-4.105-9.481-9.389 0-5.318 4.058-9.388 9.481-9.388 3.519 0 6.572 1.82 8.008 4.605l-3.34 1.928c-.79-1.678-2.549-2.749-4.704-2.749-3.16 0-5.566 2.392-5.566 5.604 0 3.213 2.406 5.605 5.566 5.605 2.155 0 3.914-1.107 4.776-2.749l3.34 1.892c-1.508 2.82-4.561 4.64-8.08 4.64zm14.472-13.387c0 3.249 9.661 1.285 9.661 7.89 0 3.57-3.125 5.497-7.003 5.497-3.591 0-6.177-1.607-7.326-4.177l3.34-1.927c.574 1.606 2.011 2.57 3.986 2.57 1.724 0 3.052-.571 3.052-2 0-3.176-9.66-1.391-9.66-7.781 0-3.356 2.909-5.462 6.572-5.462 2.945 0 5.387 1.357 6.644 3.713l-3.268 1.82c-.647-1.392-1.904-2.035-3.376-2.035-1.401 0-2.622.607-2.622 1.892zm16.556 0c0 3.249 9.66 1.285 9.66 7.89 0 3.57-3.124 5.497-7.003 5.497-3.591 0-6.176-1.607-7.326-4.177l3.34-1.927c.575 1.606 2.011 2.57 3.986 2.57 1.724 0 3.053-.571 3.053-2 0-3.176-9.66-1.391-9.66-7.781 0-3.356 2.908-5.462 6.572-5.462 2.944 0 5.386 1.357 6.643 3.713l-3.268 1.82c-.646-1.392-1.903-2.035-3.375-2.035-1.401 0-2.622.607-2.622 1.892z" fill="#000"></path></svg></a></div><div class="flex-auto border-b border-gray-200 h-18 flex items-center justify-between px-4 sm:px-6 lg:mx-6 lg:px-0 xl:mx-8"><button type="button" class="group leading-6 font-medium flex items-center space-x-3 sm:space-x-4 hover:text-gray-600 transition-colors duration-200"><svg width="24" height="24" fill="none" class="text-gray-400 group-hover:text-gray-500 transition-colors duration-200"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><span>快速搜索<span class="hidden sm:inline"> 一切</span></span></button><div class="flex items-center space-x-6"><form class="relative hidden lg:block"><label><span class="sr-only">Tailwind CSS Version</span><select class="appearance-none block bg-transparent pr-7 py-1 text-gray-500 font-medium text-sm focus:outline-none focus:text-gray-900 transition-colors duration-200"><option value="v2">v<!-- -->2.0.2</option><option value="v1">v1.9.6</option><option value="v0">v0.7.4</option></select></label><svg class="w-5 h-5 text-gray-400 absolute top-1/2 right-0 -mt-2.5 pointer-events-none" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"></path></svg></form><a href="https://github.com/tailwindlabs/tailwindcss" class="text-gray-400 hover:text-gray-500 transition-colors duration-200"><span class="sr-only">Tailwind CSS on GitHub</span><svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></div><button type="button" class="fixed z-50 bottom-4 right-4 w-16 h-16 rounded-full bg-gray-900 text-white block lg:hidden"><span class="sr-only">Open site navigation</span><svg width="24" height="24" fill="none" class="absolute top-1/2 left-1/2 -mt-3 -ml-3 transition duration-300 transform"><path d="M4 8h16M4 16h16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><svg width="24" height="24" fill="none" class="absolute top-1/2 left-1/2 -mt-3 -ml-3 transition duration-300 transform opacity-0 scale-80"><path d="M6 18L18 6M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div class="w-full max-w-8xl mx-auto"><div class="lg:flex"><div id="sidebar" class="fixed z-40 inset-0 flex-none h-full bg-black bg-opacity-25 w-full lg:bg-white lg:static lg:h-auto lg:overflow-y-visible lg:pt-0 lg:w-60 xl:w-72 lg:block hidden"><div id="navWrapper" class="h-full overflow-y-auto scrolling-touch lg:h-auto lg:block lg:relative lg:sticky lg:bg-transparent overflow-hidden lg:top-18 bg-white mr-24 lg:mr-0"><div class="hidden lg:block h-12 pointer-events-none absolute inset-x-0 z-10 bg-gradient-to-b from-white"></div><nav id="nav" class="px-1 pt-6 overflow-y-auto font-medium text-base sm:px-3 xl:px-5 lg:text-sm pb-10 lg:pt-10 lg:pb-16 sticky?lg:h-(screen-18)"><div class="relative flex mb-8 px-3 lg:hidden"><form class="relative"><label><span class="sr-only">Tailwind CSS Version</span><select class="appearance-none block bg-transparent pr-7 py-1 text-gray-500 font-medium text-sm focus:outline-none focus:text-gray-900 transition-colors duration-200"><option value="v2">v<!-- -->2.0.2</option><option value="v1">v1.9.6</option><option value="v0">v0.7.4</option></select></label><svg class="w-5 h-5 text-gray-400 absolute top-1/2 right-0 -mt-2.5 pointer-events-none" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"></path></svg></form></div><ul><li><a href="/docs" class="flex items-center px-3 hover:text-gray-900 transition-colors duration-200 mb-4 text-gray-900"><div class="mr-3 rounded-md bg-gradient-to-br from-pink-500 to-rose-500"><svg class="h-6 w-6" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 6C10.0929 6 11.1175 6.29218 12 6.80269V16.8027C11.1175 16.2922 10.0929 16 9 16C7.90714 16 6.88252 16.2922 6 16.8027V6.80269C6.88252 6.29218 7.90714 6 9 6Z" fill="#FFF1F2"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M15 6C16.0929 6 17.1175 6.29218 18 6.80269V16.8027C17.1175 16.2922 16.0929 16 15 16C13.9071 16 12.8825 16.2922 12 16.8027V6.80269C12.8825 6.29218 13.9071 6 15 6Z" fill="#FECDD3"></path></svg></div>中文文档</a></li><li><a href="https://tailwindui.com/components?utm_source=tailwindcss&amp;utm_medium=navigation" class="flex items-center px-3 hover:text-gray-900 transition-colors duration-200 mb-4"><div class="mr-3 rounded-md bg-gradient-to-br from-purple-500 to-indigo-500"><svg class="h-6 w-6" viewBox="0 0 24 24"><path d="M6 9l6-3 6 3v6l-6 3-6-3V9z" fill="#F5F3FF"></path><path d="M6 9l6 3v6l-6-3V9z" fill="#DDD6FE"></path><path d="M18 9l-6 3v6l6-3V9z" fill="#C4B5FD"></path></svg></div>组件</a></li><li><a href="https://play.tailwindcss.com" class="flex items-center px-3 hover:text-gray-900 transition-colors duration-200 mb-4"><div class="mr-3 rounded-md bg-gradient-to-br from-yellow-400 to-orange-500"><svg class="h-6 w-6" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.196 6.02a1 1 0 01.785 1.176l-2 10a1 1 0 01-1.961-.392l2-10a1 1 0 011.176-.784z" fill="#FDE68A"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M15.293 9.293a1 1 0 011.414 0l2 2a1 1 0 010 1.414l-2 2a1 1 0 01-1.414-1.414L16.586 12l-1.293-1.293a1 1 0 010-1.414zM8.707 9.293a1 1 0 010 1.414L7.414 12l1.293 1.293a1 1 0 11-1.414 1.414l-2-2a1 1 0 010-1.414l2-2a1 1 0 011.414 0z" fill="#FDF4FF"></path></svg></div>在线运行环境</a></li><li><a href="https://blog.tailwindcss.com" class="flex items-center px-3 hover:text-gray-900 transition-colors duration-200 mb-4"><div class="mr-3 rounded-md bg-gradient-to-br from-green-400 to-cyan-500"><svg class="h-6 w-6" viewBox="0 0 24 24"><path d="M8 9a1 1 0 011-1h8a1 1 0 011 1v7.5a1.5 1.5 0 01-1.5 1.5h-7A1.5 1.5 0 018 16.5V9z" fill="#6EE7B7"></path><path d="M15 7a1 1 0 00-1-1H7a1 1 0 00-1 1v9.5A1.5 1.5 0 007.5 18H16v-.085a1.5 1.5 0 01-1-1.415V7z" fill="#ECFDF5"></path><path fill="#A7F3D0" d="M8 8h5v4H8zM8 14h5v2H8z"></path></svg></div>新闻</a></li><li><a href="/resources" class="flex items-center px-3 hover:text-gray-900 transition-colors duration-200 mb-4"><div class="mr-3 rounded-md bg-gradient-to-br from-light-blue-400 to-indigo-500"><svg class="h-6 w-6" viewBox="0 0 24 24"><path d="M17 13a1 1 0 011 1v3a1 1 0 01-1 1H8.5a2.5 2.5 0 010-5H17z" fill="#93C5FD"></path><path d="M12.743 7.722a1 1 0 011.414 0l2.122 2.121a1 1 0 010 1.414l-6.01 6.01a2.5 2.5 0 11-3.536-3.536l6.01-6.01z" fill="#BFDBFE"></path><path d="M6 7a1 1 0 011-1h3a1 1 0 011 1v8.5a2.5 2.5 0 01-5 0V7z" fill="#EFF6FF"></path><path d="M9.5 15.5a1 1 0 11-2 0 1 1 0 012 0z" fill="#60A5FA"></path></svg></div>资源</a></li><li><a href="https://www.youtube.com/tailwindlabs" class="flex items-center px-3 hover:text-gray-900 transition-colors duration-200 mb-10"><div class="mr-3 rounded-md bg-gradient-to-br from-fuchsia-500 to-purple-600"><svg class="h-6 w-6" viewBox="0 0 24 24"><circle cx="12" cy="12" r="7" fill="#F3E8FF"></circle><path d="M14.52 11.136a1 1 0 010 1.728l-3.016 1.759A1 1 0 0110 13.759v-3.518a1 1 0 011.504-.864l3.015 1.76z" fill="#C084FC"></path></svg></div>视频</a></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">入门</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/installation"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">安装</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="https://blog.tailwindcss.com/tailwindcss-v2"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">发布说明</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/upgrading-to-v2"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">升级指南</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/using-with-preprocessors"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">使用预处理器</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/optimizing-for-production"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">生产优化</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/browser-support"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">浏览器支持</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/intellisense"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">智能感知</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">核心概念</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/utility-first"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">功能优先</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/responsive-design"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">响应式设计</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/hover-focus-and-other-states"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">悬停、焦点和其它状态</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/dark-mode"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">深色模式</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/adding-base-styles"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">添加基础样式</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/extracting-components"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">提取组件</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/adding-new-utilities"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">添加新的功能类</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/functions-and-directives"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">函数与指令</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">定制</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/configuration"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">配置</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/theme"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">主题</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/breakpoints"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">断点</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block text-cyan-700" href="/docs/customizing-colors"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-50"></span><span class="relative">颜色</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/customizing-spacing"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">间距</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/configuring-variants"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">变体</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/plugins"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">插件</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/presets"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">预设</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">基础样式</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/preflight"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Preflight</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">布局</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/container"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">容器</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/box-sizing"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Box Sizing</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/display"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Display</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/float"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">浮动</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/clear"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">清除浮动</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/object-fit"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Object Fit</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/object-position"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Object Position</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/overflow"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">溢出</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/overscroll-behavior"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Overscroll Behavior</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/position"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">定位</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/top-right-bottom-left"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Top / Right / Bottom / Left</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/visibility"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">可见性</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/z-index"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Z-Index</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">盒模型</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/flex-direction"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Flex Direction</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/flex-wrap"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Flex Wrap</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/flex"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Flex</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/flex-grow"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Flex Grow</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/flex-shrink"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Flex Shrink</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/order"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Order</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">网格</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/grid-template-columns"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Grid Template Columns</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/grid-column"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Grid Column Start / End</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/grid-template-rows"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Grid Template Rows</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/grid-row"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Grid Row Start / End</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/grid-auto-flow"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Grid Auto Flow</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/grid-auto-columns"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Grid Auto Columns</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/grid-auto-rows"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Grid Auto Rows</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/gap"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Gap</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">盒对齐</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/justify-content"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Justify Content</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/justify-items"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Justify Items</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/justify-self"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Justify Self</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/align-content"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Align Content</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/align-items"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Align Items</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/align-self"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Align Self</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/place-content"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Place Content</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/place-items"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Place Items</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/place-self"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Place Self</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">间距</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/padding"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">内边距</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/margin"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">外边距</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/space"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Space Between</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">尺寸</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/width"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">宽度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/min-width"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">最小宽度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/max-width"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">最大宽度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/height"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">高度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/min-height"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">最小高度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/max-height"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">最大高度</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">排版</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/font-family"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">字体序列</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/font-size"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">字体大小</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/font-smoothing"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">字体平滑度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/font-style"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">字体样式</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/font-weight"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">字体粗细</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/font-variant-numeric"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">Font Variant Numeric</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/letter-spacing"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">字母间距</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/line-height"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">行高</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/list-style-type"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">列表项标记类型</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/list-style-position"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">列表项标记位置</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/placeholder-color"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">占位文本颜色</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/placeholder-opacity"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">占位文本不透明度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/text-align"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">文本对齐</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/text-color"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">文本颜色</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/text-opacity"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">文本颜色不透明度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/text-decoration"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">文本装饰</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/text-transform"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">文本转换</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/text-overflow"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">文本溢出</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/vertical-align"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">垂直对齐</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/whitespace"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">空格</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/word-break"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">文本换行</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">背景</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/background-attachment"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">背景图像固定</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/background-clip"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">背景图像裁剪</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/background-color"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">背景颜色</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/background-opacity"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">背景颜色不透明度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/background-position"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">背景图像位置</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/background-repeat"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">背景图像重复</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/background-size"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">背景图像大小</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/background-image"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">背景图像</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/gradient-color-stops"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">渐变色停止</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">边框</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/border-radius"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">边框圆角</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/border-width"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">边框厚度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/border-color"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">边框颜色</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/border-opacity"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">边框不透明度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/border-style"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">边框样式</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/divide-width"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">分割线厚度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/divide-color"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">分割线颜色</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/divide-opacity"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">分割线不透明度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/divide-style"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">分割线样式</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/ring-width"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">轮廓环厚度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/ring-color"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">轮廓环颜色</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/ring-opacity"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">轮廓环不透明度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/ring-offset-width"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">轮廓环偏移厚度</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/ring-offset-color"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">轮廓环偏移颜色</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">特效</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/box-shadow"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">盒阴影</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/opacity"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">不透明度</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">表格</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/border-collapse"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">表格边框</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/table-layout"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">表格布局</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">过渡和动画</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/transition-property"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">过渡属性</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/transition-duration"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">过渡持续时间</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/transition-timing-function"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">过渡计时函数</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/transition-delay"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">过渡延迟</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/animation"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">动画</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">转换</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/transform"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">变换</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/transform-origin"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">变换原点</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/scale"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">缩放</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/rotate"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">旋转</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/translate"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">平移</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/skew"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">倾斜</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">交互</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/appearance"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">表单外观</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/cursor"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">光标效果</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/outline"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">轮廓</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/pointer-events"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">指向事件</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/resize"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">大小调整</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/user-select"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">用户选择</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">SVG</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/fill"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">填充</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/stroke"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">线条</span></a></li><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/stroke-width"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">线条厚度</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">可访问性</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/screen-readers"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">屏幕阅读器</span></a></li></ul></li><li class="mt-8"><h5 class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900">官方插件</h5><ul><li><a class="px-3 py-2 transition-colors duration-200 relative block hover:text-gray-900 text-gray-500" href="/docs/typography-plugin"><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span><span class="relative">排版</span></a></li></ul></li></ul></nav></div></div><div id="content-wrapper" class="min-w-0 w-full flex-auto lg:static lg:max-h-full lg:overflow-visible"><div class="pt-10 pb-24 lg:pb-16 w-full flex"><div class="min-w-0 flex-auto px-4 sm:px-6 xl:px-8"><div class="pb-10 border-b border-gray-200 mb-10"><div class="flex items-center"><h1 class="text-3xl font-extrabold text-gray-900 tracking-tight">自定义颜色</h1></div><p class="mt-1 text-lg text-gray-500">为您的项目定制默认调色盘。</p></div><div><div class="prose"><h2 class="group flex whitespace-pre-wrap" id="" style="margin-bottom:0"><span class="sr-only">概述</span></h2><p>Tailwind 包含一个专业制作的开箱即用的默认调色板，如果您没有自己的特定品牌，这是一个很好的起点。</p><div class="mt-10"></div></div><div class="grid grid-cols-1 gap-8"><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Gray</div><div><code class="text-xs text-gray-500">colors.<!-- -->coolGray</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f9fafb"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#F9FAFB</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f3f4f6"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#F3F4F6</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#e5e7eb"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#E5E7EB</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#d1d5db"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#D1D5DB</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#9ca3af"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#9CA3AF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#6b7280"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#6B7280</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#4b5563"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#4B5563</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#374151"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#374151</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#1f2937"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#1F2937</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#111827"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#111827</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Red</div><div><code class="text-xs text-gray-500">colors.<!-- -->red</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fef2f2"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#FEF2F2</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fee2e2"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#FEE2E2</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fecaca"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#FECACA</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fca5a5"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#FCA5A5</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f87171"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#F87171</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ef4444"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#EF4444</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#dc2626"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#DC2626</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#b91c1c"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#B91C1C</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#991b1b"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#991B1B</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#7f1d1d"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#7F1D1D</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Yellow</div><div><code class="text-xs text-gray-500">colors.<!-- -->amber</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fffbeb"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#FFFBEB</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fef3c7"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#FEF3C7</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fde68a"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#FDE68A</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fcd34d"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#FCD34D</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fbbf24"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#FBBF24</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f59e0b"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#F59E0B</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#d97706"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#D97706</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#b45309"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#B45309</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#92400e"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#92400E</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#78350f"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#78350F</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Green</div><div><code class="text-xs text-gray-500">colors.<!-- -->emerald</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ecfdf5"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#ECFDF5</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#d1fae5"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#D1FAE5</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#a7f3d0"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#A7F3D0</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#6ee7b7"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#6EE7B7</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#34d399"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#34D399</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#10b981"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#10B981</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#059669"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#059669</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#047857"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#047857</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#065f46"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#065F46</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#064e3b"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#064E3B</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Blue</div><div><code class="text-xs text-gray-500">colors.<!-- -->blue</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#eff6ff"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#EFF6FF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#dbeafe"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#DBEAFE</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#bfdbfe"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#BFDBFE</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#93c5fd"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#93C5FD</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#60a5fa"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#60A5FA</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#3b82f6"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#3B82F6</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#2563eb"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#2563EB</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#1d4ed8"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#1D4ED8</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#1e40af"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#1E40AF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#1e3a8a"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#1E3A8A</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Indigo</div><div><code class="text-xs text-gray-500">colors.<!-- -->indigo</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#eef2ff"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#EEF2FF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#e0e7ff"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#E0E7FF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#c7d2fe"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#C7D2FE</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#a5b4fc"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#A5B4FC</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#818cf8"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#818CF8</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#6366f1"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#6366F1</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#4f46e5"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#4F46E5</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#4338ca"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#4338CA</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#3730a3"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#3730A3</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#312e81"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#312E81</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Purple</div><div><code class="text-xs text-gray-500">colors.<!-- -->violet</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f5f3ff"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#F5F3FF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ede9fe"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#EDE9FE</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ddd6fe"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#DDD6FE</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#c4b5fd"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#C4B5FD</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#a78bfa"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#A78BFA</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#8b5cf6"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#8B5CF6</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#7c3aed"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#7C3AED</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#6d28d9"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#6D28D9</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#5b21b6"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#5B21B6</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#4c1d95"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#4C1D95</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Pink</div><div><code class="text-xs text-gray-500">colors.<!-- -->pink</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fdf2f8"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#FDF2F8</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fce7f3"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#FCE7F3</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fbcfe8"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#FBCFE8</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f9a8d4"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#F9A8D4</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f472b6"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#F472B6</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ec4899"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#EC4899</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#db2777"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#DB2777</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#be185d"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#BE185D</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#9d174d"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#9D174D</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#831843"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#831843</div></div></div></div></div></div></div><div class="prose"><div class="mt-10"></div><p>但是当您需要定制您的调色板时，您可以在您的 <code>tailwind.config.js</code> 文件的 <code>theme</code> 部分的 <code>colors</code> 键下配置您的颜色。</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-js"><code class="language-js"><span class="token comment">// tailwind.config.js</span>
module<span class="token punctuation">.</span><span class="token property-access">exports</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  theme<span class="token operator">:</span> <span class="token punctuation">{</span>
    colors<span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token comment">// Configure your color palette here</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre></div><p>当涉及到建立一个自定义调色板时，您可以从我们丰富的调色板中 <a href="#curating-colors">策划您的颜色</a>，或者通过直接添加您的特定颜色值 <!-- -->[配置您自己的自定义颜色]<!-- --> (#custom-colors)。</p><hr/><h2 class="group flex whitespace-pre-wrap" id="-1"><a href="#-1" class="absolute after:hash opacity-0 group-hover:opacity-100" style="margin-left:-1em;padding-right:0.5em;box-shadow:none;color:#a1a1aa" aria-label="Anchor"></a><span>策划颜色</span></h2><p>如果您没有一套完全自定义的颜色，您可以从我们完整的调色板中策划您的颜色，只需要将 <code>&#x27;tailwindcss/colors&#x27;</code> 导入您的配置文件中，然后选择您喜欢的颜色。</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-js"><code class="language-js"><span class="token comment">// tailwind.config.js</span>
<span class="token keyword">const</span> colors <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#x27;tailwindcss/colors&#x27;</span><span class="token punctuation">)</span>

module<span class="token punctuation">.</span><span class="token property-access">exports</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  theme<span class="token operator">:</span> <span class="token punctuation">{</span>
    colors<span class="token operator">:</span> <span class="token punctuation">{</span>
      gray<span class="token operator">:</span> colors<span class="token punctuation">.</span><span class="token property-access">trueGray</span><span class="token punctuation">,</span>
      indigo<span class="token operator">:</span> colors<span class="token punctuation">.</span><span class="token property-access">indigo</span><span class="token punctuation">,</span>
      red<span class="token operator">:</span> colors<span class="token punctuation">.</span><span class="token property-access">rose</span><span class="token punctuation">,</span>
      yellow<span class="token operator">:</span> colors<span class="token punctuation">.</span><span class="token property-access">amber</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre></div><p>虽然每种颜色都有一个特定的名称，但我们鼓励您在自己的项目中按照自己的喜好给它们起别名。我们甚至在默认配置中也是这样做的，给 <code>coolGray</code> 起别名为 <code>gray</code>，给 <code>violet</code> 起别名为 <code>purple</code>，给 <code>amber</code> 起别名为 <code>yellow</code>，给 <code>emerald</code> 起别名为 <code>green</code>。</p><p>请参阅我们的<a href="#color-palette-reference">完整调色板参考</a>，查看默认可供选择的颜色。</p><hr/><h2 class="group flex whitespace-pre-wrap" id="-2"><a href="#-2" class="absolute after:hash opacity-0 group-hover:opacity-100" style="margin-left:-1em;padding-right:0.5em;box-shadow:none;color:#a1a1aa" aria-label="Anchor"></a><span>自定义颜色</span></h2><p>您可以添加自己的颜色值来建立一个完全自定义的调色板。</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-js"><code class="language-js"><span class="token comment">// tailwind.config.js</span>
module<span class="token punctuation">.</span><span class="token property-access">exports</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  theme<span class="token operator">:</span> <span class="token punctuation">{</span>
    colors<span class="token operator">:</span> <span class="token punctuation">{</span>
      blue<span class="token operator">:</span> <span class="token punctuation">{</span>
        light<span class="token operator">:</span> <span class="token string">&#x27;#85d7ff&#x27;</span><span class="token punctuation">,</span>
        <span class="token constant">DEFAULT</span><span class="token operator">:</span> <span class="token string">&#x27;#1fb6ff&#x27;</span><span class="token punctuation">,</span>
        dark<span class="token operator">:</span> <span class="token string">&#x27;#009eeb&#x27;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      pink<span class="token operator">:</span> <span class="token punctuation">{</span>
        light<span class="token operator">:</span> <span class="token string">&#x27;#ff7ce5&#x27;</span><span class="token punctuation">,</span>
        <span class="token constant">DEFAULT</span><span class="token operator">:</span> <span class="token string">&#x27;#ff49db&#x27;</span><span class="token punctuation">,</span>
        dark<span class="token operator">:</span> <span class="token string">&#x27;#ff16d1&#x27;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      gray<span class="token operator">:</span> <span class="token punctuation">{</span>
        darkest<span class="token operator">:</span> <span class="token string">&#x27;#1f2d3d&#x27;</span><span class="token punctuation">,</span>
        dark<span class="token operator">:</span> <span class="token string">&#x27;#3c4858&#x27;</span><span class="token punctuation">,</span>
        <span class="token constant">DEFAULT</span><span class="token operator">:</span> <span class="token string">&#x27;#c0ccda&#x27;</span><span class="token punctuation">,</span>
        light<span class="token operator">:</span> <span class="token string">&#x27;#e0e6ed&#x27;</span><span class="token punctuation">,</span>
        lightest<span class="token operator">:</span> <span class="token string">&#x27;#f9fafc&#x27;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre></div><p>默认情况下，这些颜色会被所有颜色驱动的功能类自动共享，如 <code>textColor</code>、<code>backgroundColor</code>、<code>borderColor</code> 等。</p><hr/><h2 class="group flex whitespace-pre-wrap" id="-3"><a href="#-3" class="absolute after:hash opacity-0 group-hover:opacity-100" style="margin-left:-1em;padding-right:0.5em;box-shadow:none;color:#a1a1aa" aria-label="Anchor"></a><span>颜色对象语法</span></h2><p>您可以看到，上面我们使用嵌套对象符号来定义我们的颜色，其中嵌套键作为修饰符添加到基础颜色名称中：</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-js"><code class="language-js"><span class="token comment">// tailwind.config.js</span>
module<span class="token punctuation">.</span><span class="token property-access">exports</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  theme<span class="token operator">:</span> <span class="token punctuation">{</span>
    colors<span class="token operator">:</span> <span class="token punctuation">{</span>
      indigo<span class="token operator">:</span> <span class="token punctuation">{</span>
        light<span class="token operator">:</span> <span class="token string">&#x27;#b3bcf5&#x27;</span><span class="token punctuation">,</span>
        <span class="token constant">DEFAULT</span><span class="token operator">:</span> <span class="token string">&#x27;#5c6ac4&#x27;</span><span class="token punctuation">,</span>
        dark<span class="token operator">:</span> <span class="token string">&#x27;#202e78&#x27;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre></div><p>颜色名称的不同分段组合成类名，如 <code>bg-indigo-light</code>。</p><p>和 Tailwind 的很多地方一样，<code>DEFAULT</code> 键很特殊，意思是&quot;没有修饰符&quot;，所以这个配置会生成 <code>text-indigo</code> 和 <code>bg-indigo</code> 这样的类，而不是 <code>text-indigo-DEFAULT</code> 或 <code>bg-indigo-DEFAULT</code>。</p><p>您也可以将颜色定义为简单的字符串而不是对象。</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-js"><code class="language-js"><span class="token comment">// tailwind.config.js</span>
module<span class="token punctuation">.</span><span class="token property-access">exports</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  theme<span class="token operator">:</span> <span class="token punctuation">{</span>
    colors<span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token string">&#x27;indigo-lighter&#x27;</span><span class="token operator">:</span> <span class="token string">&#x27;#b3bcf5&#x27;</span><span class="token punctuation">,</span>
      <span class="token string">&#x27;indigo&#x27;</span><span class="token operator">:</span> <span class="token string">&#x27;#5c6ac4&#x27;</span><span class="token punctuation">,</span>
      <span class="token string">&#x27;indigo-dark&#x27;</span><span class="token operator">:</span> <span class="token string">&#x27;#202e78&#x27;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre></div><p>请注意，当使用 <code>theme()</code> 函数访问颜色时，您需要使用与定义颜色相同的符号。</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-js"><code class="language-js"><span class="token comment">// tailwind.config.js</span>
module<span class="token punctuation">.</span><span class="token property-access">exports</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  theme<span class="token operator">:</span> <span class="token punctuation">{</span>
    colors<span class="token operator">:</span> <span class="token punctuation">{</span>
      indigo<span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token comment">// theme(&#x27;colors.indigo.light&#x27;)</span>
        light<span class="token operator">:</span> <span class="token string">&#x27;#b3bcf5&#x27;</span><span class="token punctuation">,</span>

        <span class="token comment">// theme(&#x27;colors.indigo.DEFAULT&#x27;)</span>
        <span class="token constant">DEFAULT</span><span class="token operator">:</span> <span class="token string">&#x27;#5c6ac4&#x27;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>

      <span class="token comment">// theme(&#x27;colors.indigo-dark&#x27;)</span>
      <span class="token string">&#x27;indigo-dark&#x27;</span><span class="token operator">:</span> <span class="token string">&#x27;#202e78&#x27;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre></div><hr/><h2 class="group flex whitespace-pre-wrap" id="-4"><a href="#-4" class="absolute after:hash opacity-0 group-hover:opacity-100" style="margin-left:-1em;padding-right:0.5em;box-shadow:none;color:#a1a1aa" aria-label="Anchor"></a><span>扩展默认颜色</span></h2><p>正如 <a href="/docs/theme#extending-the-default-theme">主题文档</a> 中所述，如果您想扩展默认的调色板，而不是覆盖它，您可以使用您的 <code>tailwind.config.js</code> 文件中的 <code>theme.extend.colors</code> 部分来实现。</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-js"><code class="language-js"><span class="token comment">// tailwind.config.js</span>
module<span class="token punctuation">.</span><span class="token property-access">exports</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  theme<span class="token operator">:</span> <span class="token punctuation">{</span>
    extend<span class="token operator">:</span> <span class="token punctuation">{</span>
      colors<span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token string">&#x27;regal-blue&#x27;</span><span class="token operator">:</span> <span class="token string">&#x27;#243c5a&#x27;</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre></div><p>这将生成像 <code>bg-regal-blue</code> 这样的类，除了所有 Tailwind 的默认颜色。</p><p>这些扩展是深度合并的，所以如果您想在 Tailwind 的默认颜色中增加一个额外的阴影，您可以这样做：</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-js"><code class="language-js"><span class="token comment">// tailwind.config.js</span>
module<span class="token punctuation">.</span><span class="token property-access">exports</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  theme<span class="token operator">:</span> <span class="token punctuation">{</span>
    extend<span class="token operator">:</span> <span class="token punctuation">{</span>
      colors<span class="token operator">:</span> <span class="token punctuation">{</span>
        blue<span class="token operator">:</span> <span class="token punctuation">{</span>
          <span class="token number">450</span><span class="token operator">:</span> <span class="token string">&#x27;#5F99F7&#x27;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre></div><p>这将增加像 <code>bg-blue-450</code> 这样的类，而不会失去像 <code>bg-blue-400</code> 或 <code>bg-blue-500</code> 这样的现有的类。</p><hr/><h2 class="group flex whitespace-pre-wrap" id="-5"><a href="#-5" class="absolute after:hash opacity-0 group-hover:opacity-100" style="margin-left:-1em;padding-right:0.5em;box-shadow:none;color:#a1a1aa" aria-label="Anchor"></a><span>禁用一个默认颜色</span></h2><p>如果您想禁用一个默认颜色，因为您没有在项目中使用它，最简单的方法是建立一个新的调色板，不包括您想禁用的颜色。</p><p>例如：这个 <code>tailwind.config.js</code> 文件不包括 teal, orange 和 pink，但包括其余的默认颜色。</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-js"><code class="language-js"><span class="token comment">// tailwind.config.js</span>
<span class="token keyword">const</span> colors <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#x27;tailwindcss/colors&#x27;</span><span class="token punctuation">)</span>

module<span class="token punctuation">.</span><span class="token property-access">exports</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  theme<span class="token operator">:</span> <span class="token punctuation">{</span>
    colors<span class="token operator">:</span> <span class="token punctuation">{</span>
      transparent<span class="token operator">:</span> <span class="token string">&#x27;transparent&#x27;</span><span class="token punctuation">,</span>
      current<span class="token operator">:</span> <span class="token string">&#x27;currentColor&#x27;</span><span class="token punctuation">,</span>
      black<span class="token operator">:</span> <span class="token string">&#x27;#000&#x27;</span><span class="token punctuation">,</span>
      white<span class="token operator">:</span> <span class="token string">&#x27;#fff&#x27;</span><span class="token punctuation">,</span>
      gray<span class="token operator">:</span> colors<span class="token punctuation">.</span><span class="token property-access">coolGray</span><span class="token punctuation">,</span>
      red<span class="token operator">:</span> colors<span class="token punctuation">.</span><span class="token property-access">red</span><span class="token punctuation">,</span>
      yellow<span class="token operator">:</span> colors<span class="token punctuation">.</span><span class="token property-access">amber</span><span class="token punctuation">,</span>
      blue<span class="token operator">:</span> colors<span class="token punctuation">.</span><span class="token property-access">blue</span><span class="token punctuation">,</span>
      pink<span class="token operator">:</span> colors<span class="token punctuation">.</span><span class="token property-access">pink</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre></div><p>另外，您也可以不动调色板，依靠 <a href="/docs/optimizing-for-production">tree-shaking 未使用的样式</a> 来删除您不使用的颜色。</p><hr/><h2 class="group flex whitespace-pre-wrap" id="-6"><a href="#-6" class="absolute after:hash opacity-0 group-hover:opacity-100" style="margin-left:-1em;padding-right:0.5em;box-shadow:none;color:#a1a1aa" aria-label="Anchor"></a><span>为您的颜色命名</span></h2><p>Tailwind 使用字面的颜色名称<em>(如红色，绿色等)</em>和一个默认的数字比例<em>(其中50为浅色，900为深色)</em>。这对大多数项目来说是相当实用的，但也有充分的理由使用其他的命名惯例。</p><p>例如，如果您正在做一个需要支持多个主题的项目，那么使用 <code>primary</code> 和 <code>secondary</code> 这样更抽象的名称可能是有意义的。</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-js"><code class="language-js"><span class="token comment">// tailwind.config.js</span>
module<span class="token punctuation">.</span><span class="token property-access">exports</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  theme<span class="token operator">:</span> <span class="token punctuation">{</span>
    colors<span class="token operator">:</span> <span class="token punctuation">{</span>
      primary<span class="token operator">:</span> <span class="token string">&#x27;#5c6ac4&#x27;</span><span class="token punctuation">,</span>
      secondary<span class="token operator">:</span> <span class="token string">&#x27;#ecc94b&#x27;</span><span class="token punctuation">,</span>
      <span class="token comment">// ...</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre></div><p>您可以像我们上面那样明确地配置这些颜色，也可以从我们完整的调色板中调入颜色，并对给他们起个别名。</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-js"><code class="language-js"><span class="token comment">// tailwind.config.js</span>
<span class="token keyword">const</span> colors <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#x27;tailwindcss/colors&#x27;</span><span class="token punctuation">)</span>

module<span class="token punctuation">.</span><span class="token property-access">exports</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  theme<span class="token operator">:</span> <span class="token punctuation">{</span>
    colors<span class="token operator">:</span> <span class="token punctuation">{</span>
      primary<span class="token operator">:</span> colors<span class="token punctuation">.</span><span class="token property-access">indigo</span><span class="token punctuation">,</span>
      secondary<span class="token operator">:</span> colors<span class="token punctuation">.</span><span class="token property-access">yellow</span><span class="token punctuation">,</span>
      neutral<span class="token operator">:</span> colors<span class="token punctuation">.</span><span class="token property-access">gray</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre></div><p>您甚至可以使用 CSS 自定义属性（变量）来定义这些颜色，以便于在客户端切换主题。</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-js"><code class="language-js"><span class="token comment">// tailwind.config.js</span>
module<span class="token punctuation">.</span><span class="token property-access">exports</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  theme<span class="token operator">:</span> <span class="token punctuation">{</span>
    colors<span class="token operator">:</span> <span class="token punctuation">{</span>
      primary<span class="token operator">:</span> <span class="token string">&#x27;var(--color-primary)&#x27;</span><span class="token punctuation">,</span>
      secondary<span class="token operator">:</span> <span class="token string">&#x27;var(--color-secondary)&#x27;</span><span class="token punctuation">,</span>
      <span class="token comment">// ...</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre></div><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-css"><code class="language-css"><span class="token comment">/* In your CSS */</span>
<span class="token selector"><span class="token pseudo-class">:root</span></span> <span class="token punctuation">{</span>
  <span class="token variable">--color-primary</span><span class="token punctuation">:</span> <span class="token hexcode color">#5c6ac4</span><span class="token punctuation">;</span>
  <span class="token variable">--color-secondary</span><span class="token punctuation">:</span> <span class="token hexcode color">#ecc94b</span><span class="token punctuation">;</span>
  <span class="token comment">/* ... */</span>
<span class="token punctuation">}</span>

<span class="token atrule"><span class="token rule">@tailwind</span> base<span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@tailwind</span> components<span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@tailwind</span> utilities<span class="token punctuation">;</span></span></code></pre></div><hr/><h2 class="group flex whitespace-pre-wrap" id="-7"><a href="#-7" class="absolute after:hash opacity-0 group-hover:opacity-100" style="margin-left:-1em;padding-right:0.5em;box-shadow:none;color:#a1a1aa" aria-label="Anchor"></a><span>生成颜色</span></h2><p>我们常见的一个问题是&quot;如何生成自己自定义颜色的 50-900 种色调？&quot;。</p><p>坏消息是，颜色是复杂的，尽管尝试了几十个不同的工具，我们还没有找到一个能很好地生成这种调色板的工具。我们手工挑选了所有 Tailwind 的默认颜色，用眼睛仔细地平衡它们，并在实际设计中测试它们，以确保我们对它们感到满意。</p><hr/><h2 class="group flex whitespace-pre-wrap" id="-8"><a href="#-8" class="absolute after:hash opacity-0 group-hover:opacity-100" style="margin-left:-1em;padding-right:0.5em;box-shadow:none;color:#a1a1aa" aria-label="Anchor"></a><span>调色板参考</span></h2><p>当您把 <code>tailwindcss/colors</code> 导入到您的 <code>tailwind.config.js</code> 文件中时，这是所有可用颜色的列表。</p><div class="my-6 rounded-xl overflow-hidden bg-gray-800"><pre class="language-js"><code class="language-js"><span class="token comment">// tailwind.config.js</span>
<span class="token keyword">const</span> colors <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#x27;tailwindcss/colors&#x27;</span><span class="token punctuation">)</span>

module<span class="token punctuation">.</span><span class="token property-access">exports</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  theme<span class="token operator">:</span> <span class="token punctuation">{</span>
    colors<span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token comment">// Build your palette here</span>
      gray<span class="token operator">:</span> colors<span class="token punctuation">.</span><span class="token property-access">trueGray</span><span class="token punctuation">,</span>
      red<span class="token operator">:</span> colors<span class="token punctuation">.</span><span class="token property-access">red</span><span class="token punctuation">,</span>
      blue<span class="token operator">:</span> colors<span class="token punctuation">.</span><span class="token property-access">lightBlue</span><span class="token punctuation">,</span>
      yellow<span class="token operator">:</span> colors<span class="token punctuation">.</span><span class="token property-access">amber</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre></div><p>虽然每种颜色都有一个特定的名称，但我们鼓励您在自己的项目中按照自己的喜好给它们起别名。</p><div class="mt-10"></div></div><div class="grid grid-cols-1 gap-8"><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Blue Gray</div><div><code class="text-xs text-gray-500">colors.<!-- -->blueGray</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f8fafc"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#F8FAFC</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f1f5f9"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#F1F5F9</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#e2e8f0"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#E2E8F0</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#cbd5e1"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#CBD5E1</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#94a3b8"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#94A3B8</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#64748b"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#64748B</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#475569"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#475569</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#334155"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#334155</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#1e293b"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#1E293B</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#0f172a"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#0F172A</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Cool Gray</div><div><code class="text-xs text-gray-500">colors.<!-- -->coolGray</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f9fafb"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#F9FAFB</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f3f4f6"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#F3F4F6</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#e5e7eb"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#E5E7EB</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#d1d5db"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#D1D5DB</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#9ca3af"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#9CA3AF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#6b7280"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#6B7280</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#4b5563"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#4B5563</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#374151"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#374151</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#1f2937"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#1F2937</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#111827"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#111827</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Gray</div><div><code class="text-xs text-gray-500">colors.<!-- -->gray</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fafafa"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#FAFAFA</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f4f4f5"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#F4F4F5</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#e4e4e7"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#E4E4E7</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#d4d4d8"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#D4D4D8</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#a1a1aa"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#A1A1AA</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#71717a"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#71717A</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#52525b"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#52525B</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#3f3f46"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#3F3F46</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#27272a"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#27272A</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#18181b"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#18181B</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">True Gray</div><div><code class="text-xs text-gray-500">colors.<!-- -->trueGray</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fafafa"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#FAFAFA</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f5f5f5"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#F5F5F5</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#e5e5e5"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#E5E5E5</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#d4d4d4"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#D4D4D4</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#a3a3a3"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#A3A3A3</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#737373"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#737373</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#525252"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#525252</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#404040"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#404040</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#262626"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#262626</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#171717"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#171717</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Warm Gray</div><div><code class="text-xs text-gray-500">colors.<!-- -->warmGray</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fafaf9"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#FAFAF9</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f5f5f4"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#F5F5F4</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#e7e5e4"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#E7E5E4</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#d6d3d1"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#D6D3D1</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#a8a29e"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#A8A29E</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#78716c"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#78716C</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#57534e"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#57534E</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#44403c"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#44403C</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#292524"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#292524</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#1c1917"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#1C1917</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Red</div><div><code class="text-xs text-gray-500">colors.<!-- -->red</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fef2f2"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#FEF2F2</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fee2e2"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#FEE2E2</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fecaca"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#FECACA</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fca5a5"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#FCA5A5</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f87171"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#F87171</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ef4444"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#EF4444</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#dc2626"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#DC2626</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#b91c1c"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#B91C1C</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#991b1b"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#991B1B</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#7f1d1d"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#7F1D1D</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Orange</div><div><code class="text-xs text-gray-500">colors.<!-- -->orange</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fff7ed"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#FFF7ED</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ffedd5"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#FFEDD5</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fed7aa"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#FED7AA</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fdba74"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#FDBA74</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fb923c"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#FB923C</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f97316"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#F97316</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ea580c"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#EA580C</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#c2410c"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#C2410C</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#9a3412"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#9A3412</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#7c2d12"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#7C2D12</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Amber</div><div><code class="text-xs text-gray-500">colors.<!-- -->amber</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fffbeb"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#FFFBEB</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fef3c7"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#FEF3C7</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fde68a"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#FDE68A</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fcd34d"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#FCD34D</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fbbf24"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#FBBF24</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f59e0b"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#F59E0B</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#d97706"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#D97706</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#b45309"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#B45309</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#92400e"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#92400E</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#78350f"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#78350F</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Yellow</div><div><code class="text-xs text-gray-500">colors.<!-- -->yellow</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fefce8"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#FEFCE8</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fef9c3"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#FEF9C3</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fef08a"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#FEF08A</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fde047"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#FDE047</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#facc15"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#FACC15</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#eab308"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#EAB308</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ca8a04"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#CA8A04</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#a16207"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#A16207</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#854d0e"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#854D0E</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#713f12"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#713F12</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Lime</div><div><code class="text-xs text-gray-500">colors.<!-- -->lime</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f7fee7"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#F7FEE7</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ecfccb"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#ECFCCB</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#d9f99d"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#D9F99D</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#bef264"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#BEF264</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#a3e635"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#A3E635</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#84cc16"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#84CC16</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#65a30d"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#65A30D</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#4d7c0f"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#4D7C0F</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#3f6212"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#3F6212</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#365314"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#365314</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Green</div><div><code class="text-xs text-gray-500">colors.<!-- -->green</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f0fdf4"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#F0FDF4</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#dcfce7"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#DCFCE7</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#bbf7d0"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#BBF7D0</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#86efac"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#86EFAC</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#4ade80"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#4ADE80</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#22c55e"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#22C55E</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#16a34a"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#16A34A</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#15803d"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#15803D</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#166534"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#166534</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#14532d"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#14532D</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Emerald</div><div><code class="text-xs text-gray-500">colors.<!-- -->emerald</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ecfdf5"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#ECFDF5</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#d1fae5"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#D1FAE5</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#a7f3d0"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#A7F3D0</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#6ee7b7"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#6EE7B7</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#34d399"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#34D399</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#10b981"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#10B981</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#059669"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#059669</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#047857"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#047857</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#065f46"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#065F46</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#064e3b"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#064E3B</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Teal</div><div><code class="text-xs text-gray-500">colors.<!-- -->teal</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f0fdfa"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#F0FDFA</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ccfbf1"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#CCFBF1</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#99f6e4"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#99F6E4</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#5eead4"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#5EEAD4</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#2dd4bf"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#2DD4BF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#14b8a6"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#14B8A6</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#0d9488"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#0D9488</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#0f766e"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#0F766E</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#115e59"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#115E59</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#134e4a"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#134E4A</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Cyan</div><div><code class="text-xs text-gray-500">colors.<!-- -->cyan</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ecfeff"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#ECFEFF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#cffafe"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#CFFAFE</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#a5f3fc"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#A5F3FC</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#67e8f9"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#67E8F9</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#22d3ee"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#22D3EE</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#06b6d4"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#06B6D4</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#0891b2"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#0891B2</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#0e7490"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#0E7490</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#155e75"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#155E75</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#164e63"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#164E63</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Light Blue</div><div><code class="text-xs text-gray-500">colors.<!-- -->lightBlue</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f0f9ff"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#F0F9FF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#e0f2fe"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#E0F2FE</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#bae6fd"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#BAE6FD</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#7dd3fc"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#7DD3FC</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#38bdf8"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#38BDF8</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#0ea5e9"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#0EA5E9</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#0284c7"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#0284C7</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#0369a1"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#0369A1</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#075985"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#075985</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#0c4a6e"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#0C4A6E</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Blue</div><div><code class="text-xs text-gray-500">colors.<!-- -->blue</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#eff6ff"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#EFF6FF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#dbeafe"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#DBEAFE</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#bfdbfe"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#BFDBFE</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#93c5fd"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#93C5FD</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#60a5fa"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#60A5FA</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#3b82f6"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#3B82F6</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#2563eb"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#2563EB</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#1d4ed8"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#1D4ED8</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#1e40af"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#1E40AF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#1e3a8a"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#1E3A8A</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Indigo</div><div><code class="text-xs text-gray-500">colors.<!-- -->indigo</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#eef2ff"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#EEF2FF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#e0e7ff"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#E0E7FF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#c7d2fe"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#C7D2FE</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#a5b4fc"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#A5B4FC</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#818cf8"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#818CF8</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#6366f1"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#6366F1</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#4f46e5"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#4F46E5</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#4338ca"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#4338CA</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#3730a3"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#3730A3</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#312e81"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#312E81</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Violet</div><div><code class="text-xs text-gray-500">colors.<!-- -->violet</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f5f3ff"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#F5F3FF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ede9fe"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#EDE9FE</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ddd6fe"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#DDD6FE</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#c4b5fd"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#C4B5FD</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#a78bfa"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#A78BFA</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#8b5cf6"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#8B5CF6</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#7c3aed"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#7C3AED</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#6d28d9"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#6D28D9</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#5b21b6"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#5B21B6</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#4c1d95"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#4C1D95</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Purple</div><div><code class="text-xs text-gray-500">colors.<!-- -->purple</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#faf5ff"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#FAF5FF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f3e8ff"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#F3E8FF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#e9d5ff"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#E9D5FF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#d8b4fe"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#D8B4FE</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#c084fc"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#C084FC</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#a855f7"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#A855F7</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#9333ea"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#9333EA</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#7e22ce"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#7E22CE</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#6b21a8"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#6B21A8</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#581c87"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#581C87</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Fuchsia</div><div><code class="text-xs text-gray-500">colors.<!-- -->fuchsia</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fdf4ff"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#FDF4FF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fae8ff"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#FAE8FF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f5d0fe"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#F5D0FE</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f0abfc"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#F0ABFC</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#e879f9"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#E879F9</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#d946ef"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#D946EF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#c026d3"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#C026D3</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#a21caf"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#A21CAF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#86198f"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#86198F</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#701a75"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#701A75</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Pink</div><div><code class="text-xs text-gray-500">colors.<!-- -->pink</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fdf2f8"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#FDF2F8</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fce7f3"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#FCE7F3</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fbcfe8"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#FBCFE8</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f9a8d4"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#F9A8D4</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f472b6"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#F472B6</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ec4899"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#EC4899</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#db2777"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#DB2777</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#be185d"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#BE185D</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#9d174d"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#9D174D</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#831843"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#831843</div></div></div></div></div></div><div><div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4"><div class="w-32 flex-shrink-0"><div class="h-10 flex flex-col justify-center"><div class="text-sm font-semibold text-gray-900">Rose</div><div><code class="text-xs text-gray-500">colors.<!-- -->rose</code></div></div></div><div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2"><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fff1f2"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">50</div><div>#FFF1F2</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ffe4e6"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">100</div><div>#FFE4E6</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fecdd3"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">200</div><div>#FECDD3</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fda4af"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">300</div><div>#FDA4AF</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fb7185"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">400</div><div>#FB7185</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f43f5e"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">500</div><div>#F43F5E</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#e11d48"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">600</div><div>#E11D48</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#be123c"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">700</div><div>#BE123C</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#9f1239"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">800</div><div>#9F1239</div></div></div><div class="space-y-1.5"><div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#881337"></div><div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block"><div class="w-6 font-medium text-gray-900">900</div><div>#881337</div></div></div></div></div></div></div></div><hr class="border-gray-200 mt-10 mb-4"/><div class="flex justify-between leading-7 font-medium"><a href="/docs/breakpoints">← <!-- -->断点</a><a href="/docs/customizing-spacing">间距<!-- --> →</a></div></div><div class="hidden xl:text-sm xl:block flex-none w-64 pl-8 mr-8"><div class="flex flex-col justify-between overflow-y-auto sticky max-h-(screen-18) -mt-10 pt-10 pb-4 top-18"><div class="mb-8"><h5 class="text-gray-900 uppercase tracking-wide font-semibold mb-3 text-sm lg:text-xs">本页目录</h5><ul class="overflow-x-hidden text-gray-500 font-medium"><li><a href="#" class="block transform transition-colors duration-200 py-2 hover:text-gray-900 text-gray-900">概述</a></li><li><a href="#-1" class="block transform transition-colors duration-200 py-2 hover:text-gray-900">策划颜色</a></li><li><a href="#-2" class="block transform transition-colors duration-200 py-2 hover:text-gray-900">自定义颜色</a></li><li><a href="#-3" class="block transform transition-colors duration-200 py-2 hover:text-gray-900">颜色对象语法</a></li><li><a href="#-4" class="block transform transition-colors duration-200 py-2 hover:text-gray-900">扩展默认颜色</a></li><li><a href="#-5" class="block transform transition-colors duration-200 py-2 hover:text-gray-900">禁用一个默认颜色</a></li><li><a href="#-6" class="block transform transition-colors duration-200 py-2 hover:text-gray-900">为您的颜色命名</a></li><li><a href="#-7" class="block transform transition-colors duration-200 py-2 hover:text-gray-900">生成颜色</a></li><li><a href="#-8" class="block transform transition-colors duration-200 py-2 hover:text-gray-900">调色板参考</a></li></ul></div></div></div></div></div></div></div></div><script id="__NEXT_DATA__" type="application/json" crossorigin="anonymous">{"props":{"pageProps":{}},"page":"/docs/customizing-colors","query":{},"buildId":"HgBbTMZ3YfwE_s19lauyf","nextExport":true,"autoExport":true,"isFallback":false,"head":[["meta",{"name":"viewport","content":"width=device-width"}],["meta",{"charSet":"utf-8"}],["meta",{"name":"twitter:site","content":"@tailwindcss"}],["meta",{"name":"twitter:description","content":"为您的项目定制默认调色盘。"}],["meta",{"name":"twitter:creator","content":"@tailwindcss"}],["meta",{"property":"og:url","content":"https://tailwindcss.com/docs/customizing-colors"}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:description","content":"为您的项目定制默认调色盘。"}],["meta",{"property":"og:image","content":"https://tailwindcss.com/_next/static/media/twitter-large-card.85c0ff9e455da585949ff0aa50981857.jpg"}],["link",{"rel":"preconnect","href":"https://BH4D9OD16A-dsn.algolia.net","crossOrigin":"true"}],["title",{"children":"自定义颜色 - Tailwind CSS"}],["meta",{"name":"twitter:title","content":"自定义颜色 - Tailwind CSS"}],["meta",{"property":"og:title","content":"自定义颜色 - Tailwind CSS"}],["meta",{"name":"twitter:card","content":"summary"}],["meta",{"name":"twitter:image","content":"https://tailwindcss.com/_next/static/media/twitter-square.daf77586b35e90319725e742f6e069f9.jpg"}]]}</script><script crossorigin="anonymous" nomodule="">!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()},!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script><script crossorigin="anonymous" nomodule="" src="/_next/static/chunks/polyfills-b94cf467f33d5bbe5093.js"></script><script src="/_next/static/chunks/main-59b4822e49ee8af6cbd2.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/main-53486d82b2545edae223.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/webpack-07c5bcab23dc3e52a7c0.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/framework.dc32737cd22c934f019a.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/framework.dc32737cd22c934f019a.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/commons.a0844ced5e8df247f6dc.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/commons.22d76c353a4f72632887.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/71247caf95475e3ea7f9a0f8a30beb258b23d005.badcd99128b41b157438.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/71247caf95475e3ea7f9a0f8a30beb258b23d005.1d9cdb0d7e423ae8ff11.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/pages/_app-f73fc4f2530091cec505.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/pages/_app-22af6c3e18ff3a768b97.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/cecf69130dad263f9cb4ff787dd0f2dc73bfee9f.425fee7e5ce182155bfa.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/cecf69130dad263f9cb4ff787dd0f2dc73bfee9f.a38ff4d7f346d15b14bc.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/9f4ef91407e4b5afa7b6fb6ed79ed59ba0198a03.4b30abed5c56a7f9ac26.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/9f4ef91407e4b5afa7b6fb6ed79ed59ba0198a03.cff4864bd60c6088de2d.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/ce33ec08090f482ab0615cf50693463f3d0dfff9.beb468a512674e845e13.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/ce33ec08090f482ab0615cf50693463f3d0dfff9.f4323d55efa10804a132.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/pages/docs/customizing-colors-ba8284bd5829f25008f9.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/pages/docs/customizing-colors-fd8b201bd46d82f7595b.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/HgBbTMZ3YfwE_s19lauyf/_buildManifest.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/HgBbTMZ3YfwE_s19lauyf/_buildManifest.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/HgBbTMZ3YfwE_s19lauyf/_ssgManifest.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/HgBbTMZ3YfwE_s19lauyf/_ssgManifest.module.js" async="" crossorigin="anonymous" type="module"></script><script> </script></body></html>